<template>
  <div id="orderDiv">
      <el-form ref="form" label-width="80px">
          <el-form-item label="订单id">
              <el-input
                  v-model="orderId"
                  placeholder="请输入订单id"
              ></el-input>
          </el-form-item>
          <el-form-item label="用户类型">
              <el-select v-model="userType" @change="changeType">
                  <el-option label="用户" value="1"></el-option>
                  <el-option label="商家" value="2"></el-option>
                  <el-option label="骑手" value="3"></el-option>
                  <el-option label="站点" value="4"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="用户名称">
              <el-input
                  v-model="userName"
                  placeholder="请输入用户名称"
              ></el-input>
          </el-form-item>
          <el-form-item label="手机号">
              <el-input
                  v-model="phone"
                  placeholder="请输入手机号"
              ></el-input>
          </el-form-item>
          <el-form-item label="订单金额">
              <el-input
                  v-model="orderAmount"
                  placeholder="请输入订单金额"
              ></el-input>
          </el-form-item>
          <el-form-item label="支付方式">
              <el-radio-group v-model="payPlatform" @change="changeType">
                  <el-radio label="1">微信</el-radio>
                  <el-radio label="2">支付宝</el-radio>
              </el-radio-group>
          </el-form-item>
          <el-form-item>
              <el-button @click="toPayment" type="primary">去支付</el-button>
          </el-form-item>
      </el-form>
      <!-- <el-button @click="toPayment" type="primary">去支付</el-button> -->
      <el-dialog
          :title="title"
          :visible.sync="dialogVisible"
          width="252px"
          center
      >
          <!--二维码生成-->
          <!-- <vueQr :text="qr" :size="200" :margin="10" :correctLevel="0" :whiteMargin="false" :logoSrc="this.$store.state.logoUrl"></vueQr> -->
          <vueQr
              :text="qr"
              :size="200"
              :margin="10"
              :correctLevel="0"
              :whiteMargin="false"
          ></vueQr>
          <span id="dialogSpan" v-show="paySucc == true"></span>
          <span id="dialogSpan2" v-show="paySucc == true">
              <i
                  class="el-icon-success"
                  style="
                      background-color: #ffffff;
                      color: #67c23a;
                      font-size: 60px;
                      border-radius: 30px;
                  "
              />
              <br />
              支付成功
          </span>
          
      </el-dialog>
      <img :src="imageSrc" alt="充值结果" />
  </div>
</template>

<script>
import vueQr from "vue-qr";
import axios from "axios";
import { prePay, payStatus } from "@/api/pay";
export default {
  components: {
      vueQr,
  },
  data() {
      return {
          dialogVisible: false,
          qr: "",
          userType: "1",
          userName: "",
          phone: "",
          orderAmount: "",
          paySucc: false,
          title: "微信支付",
          orderId: 100,
          payPlatform: "1", // 微信,
          times: 0,
          imageSrc: "",
      };
  },
  methods: {
      changeType:function(val){
        val == 1 ? this.title='微信支付' : this.title='支付宝支付';
      },
      checkPay(){
          setTimeout(() => {
                  // 发送查询支付请求
                  // {orderNo: '202504011153000001'}
                  payStatus(orderNo).then(res => {
                      if(res.code == 200) {
                        console.log(res.data);
                          if(res.data == 2){
                              // 支付成功
                              this.checkPay();
                              this.dialogVisible = false
                              this.checkRechargeResult(res);
                          }else{
                              // 1和3都要隐藏二维码
                              this.dialogVisible = false
                              this.checkRechargeResult(res);

                          }
                      }
                  })
              }, 5000);
      },
      checkRechargeResult(res) {
      if (res.data === 2) {
        this.imageSrc = require("@/assets/img/pay/支付成功.png");
      } else {
        this.imageSrc = require("@/assets/img/pay/支付失败.png");
      }
    },
  
      toPayment() {
          let _this = this;
          // 这里填写后台支付的地址
          prePay({
              orderId: this.orderId,
              userType: this.userType,
              userName: this.userName,
              phone: this.phone,
              orderAmount: this.orderAmount,
              platformType: this.payPlatform,
          }).then((res) => {
              this.qr = res.data;
              console.log(this.qr);

              // this.checkPay();

              if ("WebSocket" in window) {
                  // 打开一个 web socket
                  // 通道地址按照项目进行配置
                  var ws = new WebSocket(
                      "ws://localhost:9020//bindingRecord"
                  );
                  ws.onopen = function () {
                      // Web Socket 已连接上，使用 send() 方法发送数据
                      // ws.send("data");
                      // alert("数据发送中...");
                  };
                  ws.onmessage = function (evt) {
                      var received_msg = evt.data;
                      // 接收后台推送的数据
                      // alert("数据已接收..." + evt.data);
                      if (Boolean(evt.data)) {
                          _this.paySucc = true;
                          setTimeout(() => {
                              _this.dialogVisible = false;
                          }, 3 * 1000);
                      }
                      ws.close();
                  };
                  ws.onclose = function () {};
              } else {
                  // 浏览器不支持 WebSocket
                  alert("您的浏览器不支持 WebSocket!");
              }
          });
          this.dialogVisible = true;
      },
  },
};
</script>

<style scoped>
#dialogSpan {
  display: inline-block;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 80px;
  right: 27px;
  opacity: 0.9;
  background-color: #ffffff;
}
#dialogSpan2 {
  display: inline-block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 124px;
  right: 80px;
  font-size: 20px;
  text-align: center;
}
</style>

